<template>
  <div class="g-app">
    <h2>是否用过ts的工具类型？</h2>
    <p>ts的工具类型有Partial(设置可选) Required Pick Omit ReadOnly 等</p>
  </div>
</template>
<script lang="ts" setup>
// Partial
interface User {
  name: string
  age: number
}
type User1 = Partial<User> // 属性全部可选，类似 `?`
const u: User1 = {}

// Require<T> 属性设置为必选 （和 Partial 相反）
interface Person {
  name?:string
  age?:number
}
const p: Required<Person> = {name: "姚思远", age: 20} // 如果不写name和age则会报错

// Pick<T, K> 挑选部分属性
  interface UserA {
  name: string
  age: number
  city: string
}
type User2 = Pick<UserA, 'name' | 'age'> // 只选择两个属性
const user_x: User2 = { name: 'x', age: 20 }
console.log('用户x', user_x)// {name: 'x', age: 20}

// Omit<T, K> 剔除部分属性（和 Pick 相反）
// ReadOnly<T> 属性设置为只读

interface UserB {
  name: string
  age: number
}
type User3 = Readonly<User>
const user_y: User3 = { name: 'y', age: 20 }
console.log('用户user_y', user_y)
// user_y.name = 'y' // 报错

const ysy = {
  age: 18,
  name:'姚思远'
}
type admine = typeof ysy; // 先获取类型

type Keys = keyof admine;            // 再提取键名
</script>